<template>
    <div class="home">
        <el-backtop></el-backtop>
        <el-row>
            <el-col :span="20" :offset="2" style="text-align:center;margin-bottom:1rem;margin-top:1rem;">
                <h3>学习模式</h3>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="2">
                <el-card class="box-card">
                    <div style="margin-top: 20px">
                        <el-radio-group v-model="subjectTypeId" size="small">
                            <el-radio-button label="0">全部</el-radio-button>
                            <el-radio-button label="1">填空题</el-radio-button>
                            <el-radio-button label="2">单选题</el-radio-button>
                            <el-radio-button label="3">判断题</el-radio-button>
                            <el-radio-button label="4">问答题</el-radio-button>
                            <el-radio-button label="5">多选题</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row v-for="item of subjects" :key="item.subjectId" style="margin-top:1rem;">
            <el-col :span="20" :offset="2" :id="item.id" style="text-align:center;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="text-align:left;">
                        <el-tag type="success">
                            {{item.subjectType.subjectType}}
                        </el-tag>
                        <span style="margin-left:1rem;" v-html="item.stem"></span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="show_answer(item.index)">
                            显示答案</el-button>
                    </div>
                    <el-row v-if="item.subjectTypeId==2">
                        <el-radio-group v-model="item.user_answer" style="display:block;">
                            <el-col :span="12" style="text-align:left;margin-top:1rem;" v-for="option of item.options"
                                :key="option">
                                <el-radio :label="option" border></el-radio>
                            </el-col>
                        </el-radio-group>
                    </el-row>
                    <el-row v-if="item.subjectTypeId==5">
                        <el-checkbox-group v-model="item.user_answer">
                            <el-col :span="12" style="text-align:left;margin-top:1rem;" v-for="option of item.options"
                                :key="option">
                                <el-checkbox :label="option" border></el-checkbox>
                            </el-col>
                        </el-checkbox-group>
                    </el-row>
                    <el-row v-if="item.subjectTypeId==3">
                        <el-radio-group v-model="item.user_answer" style="display:block;">
                            <el-col :span="12" style="margin-top:1rem;">
                                <el-radio style="width:100%" label="1" border>正确</el-radio>
                            </el-col>
                            <el-col :span="12" style="margin-top:1rem;">
                                <el-radio style="width:100%" label="0" border>错误</el-radio>
                            </el-col>
                        </el-radio-group>
                    </el-row>
                    <el-row style="margin-top:1rem;">
                        <el-input class="prepared_answer" style="display:none;" type="textarea"
                            :autosize="{ minRows: 2, maxRows: 20}" :readonly="true" resize="none" :value="item.answer">
                        </el-input>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-top:1rem;">
            <el-col :span="20" :offset="2">
                <el-card>
                    <el-row>
                        <el-col :span="4" :offset="2">
                            <el-button @click="submit_answer">
                                <div><i class="el-icon-circle-check"></i> 提交</div>
                            </el-button>
                        </el-col>     
                        <el-col :span="10">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>
                        </el-col>
                        <el-col :span="2" :offset="6">
                            <div id="result" style="padding:10px;display:none">
                                <el-row>
                                    <el-col :span="12">
                                        <i class="el-icon-success" style="color:#67c23a;"></i>&nbsp;&nbsp;
                                <span id="right_num" style="font-size:12px;color:#67c23a;">0</span>
                                    </el-col>
                                    <el-col :span="12">
                                        <i class="el-icon-error" style="color:#e25b5b;"></i>
                                <span id="wrong_num" style="font-size:12px;color:#e25b5b;">0</span>
                                    </el-col>
                                </el-row>
                                
                            </div>
                        </el-col>
                    </el-row>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped>

</style>
<script>
    import axios from 'axios'
    import $ from 'jquery'
    export default {
        name: 'Home',
        components: {

        },
        data() {
            return {
                radio1: "",
                subjects: [],
                subjectTypeId: 0,
                currentPage: 1,
                limit: 10,
                total: 0
            }
        },
        created() {
            this.getData(0, 1, 10)
        },
        methods: {
            //将$$替换成输入框
            filterStem(index, stem) {
                let replacement = '<div class="input"><input type="text" index=' + index + ' class="Input index' +
                    index + '"></div>' //index记录元素的位置
                stem = stem.replace(/\$\$/g, replacement)
                return stem;
            },
            //将$$替换成、
            filterAnswer(answer) {
                let replacement = ' | '
                answer = answer.replace(/\$\$/g, replacement)
                return answer;
            },
            //替换判断题中的答案
            filterJudgeAnswer(answer) {
                if (answer == 1) {
                    return "正确"
                } else {
                    return "错误"
                }
            },
            //将选项转换成数组
            filterOptions(options) {
                return options.split("$$")
            },
            //点击显示答案触发
            show_answer(index) {
                let id = this.subjects[index].id
                $("#" + id + " .prepared_answer").css("display", "block")
            },
            //按subjectTypeId查找数据
            getData(subjectTypeId, page, limit) {
                $("#result").css("display","none") //隐藏测试结果
                page = page - 1
                var intformat = require('biguint-format'),
                    FlakeId = require('flake-idgen')
                var flakeIdGen1 = new FlakeId();
                axios.get(this.$store.state.url+"/subject/?subjectTypeId=" + subjectTypeId + "&page=" + page +
                    "&limit=" + limit).then(data => {
                    console.log(data)
                    let subjects = data.data.data.subjects
                    //let currentPage=data.data.data.page.page
                    let total = data.data.data.page.total //获取数据总数

                    let list = []
                    let index = 0 //初始化元素位置
                    for (const iterator of subjects) {
                        iterator.stem = this.filterStem(index, iterator.stem) //过滤题干
                        iterator.answer = this.filterAnswer(iterator.answer) //过滤答案中的$$
                        if (iterator.subjectTypeId == 3) { //过滤判断题答案
                            iterator.judgeAnswer = iterator.answer //真实答案
                            iterator.answer = this.filterJudgeAnswer(iterator.answer)
                        }
                        if (iterator.subjectTypeId == 2 || iterator.subjectTypeId == 5) {
                            iterator.options = this.filterOptions(iterator.options)
                        }
                        if (iterator.subjectTypeId == 1 || iterator.subjectTypeId == 2 || iterator
                            .subjectTypeId == 5) { //新增用户答案的属性
                            iterator.user_answer = []
                        } else {
                            iterator.user_answer = ""
                        }
                        iterator.index = index //记录数据的位置
                        index++

                        let id = intformat(flakeIdGen1.next(), 'dec')
                        iterator.id = id //给数据一个id值

                        list.push(iterator)
                    }
                    this.subjects = list
                    this.total = total
                })
            },
            handleSizeChange(val) {
                this.limit = val
                this.getData(this.subjectTypeId, 1, this.limit)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getData(this.subjectTypeId, this.currentPage, this.limit)
            },
            //比较两个数组是否相同
            judgeResultFun(arr1, arr2) {
                let flag = true
                if (arr1.length !== arr2.length) {
                    flag = false
                } else {
                    arr1.forEach(item => {
                        if (arr2.indexOf(item) === -1) {
                            flag = false
                        }
                    })
                }
                return flag;
            },
            //提交答案
            submit_answer() {
                let right=0 //初始化正确数量
                let wrong=0 //初始化错误数量
                for (const iterator of this.subjects) { //填空题
                    if (iterator.subjectTypeId == 1) {
                        let inputs = $("#" + iterator.id + " .Input")
                        let answer = iterator.answer.split(" | ")
                        let flag=false //标记该题是否错误
                        for (const input of inputs) {
                            if (answer.indexOf(input.value) == -1) { //答案错误，红色边框input
                                $("#" + iterator.id + " .prepared_answer").css("display", "block")
                                input.style.border = "1px solid red"
                                flag=true
                            } else {
                                input.style.border = "1px solid green"
                            }
                        }
                        if(flag){
                            wrong++
                        }else{
                            right++
                        }
                        
                    }
                    if (iterator.subjectTypeId == 2 || iterator.subjectTypeId == 5) { //选择题
                        let answer = iterator.answer.split(" | ").sort()
                        let user_answer = iterator.subjectTypeId == 2 ? [iterator.user_answer] : iterator.user_answer
                        if (!this.judgeResultFun(answer, user_answer)) {
                            $("#" + iterator.id + " .prepared_answer").css("display", "block")
                            $("#" + iterator.id).css("border", "1px solid red")
                            wrong++
                        } else {
                            $("#" + iterator.id).css("border", "1px solid green")
                            right++
                        }
                    }

                    if (iterator.subjectTypeId == 3) { //判断题 
                        if (iterator.user_answer == "" || !parseInt(iterator.judgeAnswer) == parseInt(iterator
                                .user_answer)) {
                            $("#" + iterator.id + " .prepared_answer").css("display", "block")
                            $("#" + iterator.id).css("border", "1px solid red")
                            wrong++
                        } else {
                            $("#" + iterator.id).css("border", "1px solid green")
                            right++
                        }
                    }
                    if (iterator.subjectTypeId == 4) {
                        $("#" + iterator.id + " .prepared_answer").css("display", "block")
                        right++
                    }
                }
                $("#right_num").html(right)
                $("#wrong_num").html(wrong)
                $("#result").css("display","block")
            }

        },
        updated() {
            let vueobj = this
            $(".input").css("display", "inline-block").css("border-bottom", "1px solid black").css("margin-left",
                "1rem")
            $(".input input").css("display", "block").css("width", "5rem").css("border", "none").css("background",
                "none").css("outline", "none")
            $("textarea").css("border", "none")
            $(".Input").blur(function () {

                //获取vue的subjects
                let subjects = vueobj.subjects
                //获取当体题目的index
                let index = $(this).attr("index")
                //获取当体题目
                let subject = subjects[index]
                //获取当前题目的用户答案
                let user_answer = subject.user_answer

                user_answer[$(this).attr("id")] = $(this).val() //输入的值写入字典

                console.log(vueobj.subjects)

            })
            var intformat = require('biguint-format'),
                FlakeId = require('flake-idgen')
            var flakeIdGen1 = new FlakeId();
            $(".Input").each(function () { //给所有input绑定id
                let id = intformat(flakeIdGen1.next(), 'dec')
                $(this).attr("id", id)
            })


        },
        watch: {
            'subjectTypeId': function (newVal) {
                this.getData(newVal, 1, this.limit)
                this.currentPage=1
            }
        },

    }
</script>